import React from "react";
import { render } from "react-dom";
import Display from "./redux/components/display";
import Keyboard from "./redux/components/keyboard";
import { createStore } from "redux";
import { Provider } from "react-redux";
import reducer from "./redux/reducer";

const styles = {
  fontFamily: "sans-serif",
  width: "414px",
  height: "628px",
  display: 'flex',
  flexDirection: 'column'
};

const store = createStore(reducer, {
    displayNum: '0',
    lastDisplayNum: null,
    cal: {
      "+": false,
      "-": false,
      "x": false,
      "÷": false,
      "=": false
    }
});

export class App extends React.PureComponent {
    render() {
        return (
            <Provider store={store}>
                <div style={styles}>
                    <Display />
                    <Keyboard />
                </div>
            </Provider>
        );
    }
}

render(<App />, document.getElementById("root"));